<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { statistics } from '@/api/index';
import { post } from '@/utils/request';


const tableData: any = ref([]);
const getList = async () => {
  try {
    const res: any = await post(statistics.scaleInfo)
    console.log(res, 'ppppppp')
    if (res.code === '0000' && res.data && res.data.scaleInfo) {
      tableData.value = res.data.scaleInfo
    }
  } catch (error) {
    console.error('getList:', error);
  }
}
onMounted(() => {
  getList()
})

// 合计行方法
function getSummaries(param: any) {
  const { columns, data } = param;
  const sums: any[] = [];
  columns.forEach((column: any, index: number) => {
    if (index === 0) {
      sums[index] = '合计';
      return;
    }
    const values = data.map((item: any) => Number(item[column.property]) || 0);
    if (values.every((value: number) => !isNaN(value))) {
      sums[index] = values.reduce((prev: number, curr: number) => prev + curr, 0);
    } else {
      sums[index] = '';
    }
  });
  return sums;
}
</script>

<template>
  <div class="left-top flex flex-col">
    <div class="title w-full h-[40px] flex items-center pl-[12px] pr-[14px] mb-[10px] justify-between">
      云聚规模
      <img src="@/assets/img/content-img/title-point-left-top.png" alt="" class="title-opint w-[12px] h-[12px]">
    </div>
    <div class="content h-[256px]">
      <el-table :data="tableData" class="w-full h-full" :summary-method="getSummaries" show-summary>
        <el-table-column prop="branchOrgName" label="省份"  width="52"/>
        <el-table-column prop="orgNum" label="省会门店"  width="81" />
        <el-table-column prop="districtRate" label="区、县覆盖率"  width="109" />
        <el-table-column prop="townRate" label="乡镇覆盖率" width="95" />
        <el-table-column prop="coverArea" label="分拨中心占地面积" width="137" />
        <el-table-column prop="avgThroughput" label="年均吞吐量" width="95" />
      </el-table>
    </div>

  </div>
</template>

<style scoped lang="scss">
.title {
  font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
  font-weight: 700;
  font-size: 20px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 20px;
  text-shadow: 0px 0px 8px rgba(2, 3, 7, 0.35);
  text-align: left;
  font-style: normal;
  text-transform: none;
  border-left: 7px solid #6191EC;
  background-image: url('@/assets/img/content-img/title-background-left-top.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

// 使用深度选择器覆盖 Element Plus 表格样式
.content :deep(.el-table) {
  background-color: transparent !important;
  border: none !important; // 去除表格边框

  .el-table__header-wrapper,
  .el-table__body-wrapper,
  .el-table__footer-wrapper {
    background-color: transparent !important;
  }

  th,
  td {
    height: 40px;
    background-color: transparent !important;
    border: none !important; // 去除单元格边框
  }

  tr {
     height: 40px;
    background-color: transparent !important;
  }

  .el-table__header th {
    background-color: transparent !important;
  }

  // 去除表格底部边框
  &::before {
    background-color: transparent !important;
    height: 0 !important;
  }

  // 去除列之间的分割线
  .el-table__column-resize-proxy {
    border: none !important;
  }


  // 实现隔行变色效果
  .el-table__body tbody tr:nth-child(odd) {
    background-color: #0A0A0C !important; // 奇数行淡蓝色背景
  }
  .el-table__body tbody tr:nth-child(even) {
    background-color: transparent !important; // 偶数行淡白色背景
  }
  // 合计行同奇数行色
  .el-table__footer tr {
    background-color: #0A0A0C !important;
  }

  // 确保悬停效果也生效
  .el-table__body tbody tr:hover {
    background-color: rgba(97, 145, 236, 0.2) !important; // 悬停时的背景色
  }

  // 表格底部边框颜色
  .el-table__inner-wrapper:before {
    background-color: #2C2E32
  }
}
</style>
